<template>
  <div :class="[computedClass,'flex-row']" ref="search">
<!--    <el-input  v-model="value" suffix-icon="el-icon-search" @click="search"  class="search-input"></el-input>-->
    <input :placeholder="placeholder" v-model="value" class="search-input" v-bind="$attrs"></input>
    <div class="search-icon flex-col-center">
      <i class="el-icon-search"></i>
    </div>

  </div>
</template>

<script>
export default {
  name: "Search",
  props:{
    placeholder:{
      type:String,
    },
    type:{
      type:Number,
      default:1
    }
  },
  data(){
    return{
      value:""
    }
  },
  methods:{
    search(){
      this.$emit("search",this.value)
    }
  },
  computed:{
    computedClass(){
      return 'search-box'+this.type
    }
  }


}
</script>

<style scoped lang="less">
  input{
    outline: none;
    border: none;
  }
  .search-box1{

    min-width: 100px;
    min-height: 20px;
    border: 2px solid deepskyblue;
    border-radius: 10px;
    overflow: hidden;
    padding-left: 20px;
    color: transparent;
    background-color: white;
    .search-input{
      outline: none;
      border: none;
      flex: 9;
      color: #656565;
      background-color: transparent;

    }
    .search-icon{
      flex: 1;
      min-width: 30px;
      cursor: pointer;
      transition: all 0.3s;
      background-color: #01acac;
      i{
        color: black;
      }
      &:hover{
        filter: opacity(0.8);
      }
    }


  }

  //第二种样式
  .search-box2 {

    min-width: 100px;
    min-height: 20px;


    overflow: hidden;
    padding-left: 20px;
    color: transparent;
    background-color: #A3D0C3;

    .search-input {
      outline: none;
      border: none;
      flex: 9;
      color: #888787;
      background-color: transparent;

    }

    .search-icon {
      flex: 1;
      min-width: 30px;
      cursor: pointer;
      transition: all 0.3s;


      i {
        font-weight: 10;
        color: white;
      }

      &:hover {
        filter: brightness(0.5);
      }
    }

  }
  //第三种样式
  .search-box3 {

    min-width: 100px;
    min-height: 20px;


    overflow: hidden;
    padding-left: 20px;
    color: transparent;
    background-color: #6D525D;
    border: 2px solid #F9F0DA;

    .search-input {
      outline: none;
      border: none;
      flex: 9;
      color: #c2c1c1;
      background-color: transparent;

    }

    .search-icon {
      flex: 1;
      min-width: 30px;
      cursor: pointer;
      transition: all 0.3s;


      i {
        font-weight: 10;
        color: #F9F0DA;
      }

      &:hover {
        margin-right: 5px;
      }
    }
  }
</style>